﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/style4.css" />
		<style>
			span{
				font-size: 16px;
			}
			.open1{
				width: 40px;
				height: 24px;
				float: right;
				border-radius: 12px;
				margin: 14px 20px 0 0;
				position: relative;
				background:  #6fd865;
			}
			.open2{
				width: 24px;
				height: 24px;
				border-radius: 14px;
				box-sizing: border-box;
				background: white;
				position: absolute;
				left: 0px;
				border: 1px solid #ccc;
			}
			.guanBi1{
				width: 40px;
				height: 24px;
				float: right;
				border-radius: 12px;
				margin: 14px 20px 0 0;
				position: relative;
				background:  #BCBCBC;
			}
			.guanBi2{
				width: 24px;
				height: 24px;
				border-radius: 14px;
				box-sizing: border-box;
				background: white;
				position: absolute;
				right: 0px;
				border: 1px solid #BCBCBC;
			}
		</style>
	</head>

	<body>
		<div class="Title">
			<div class="FanHui" onclick="javascript:history.back(-1);">
				<img src="img/turnBack.png" />
			</div>
			<div>设置</div>
		</div>
		<div class="settingBody">
			<div class="settingClass">
				<div class="clearfix">
					<span class="fl">WIFI时自动下载</span>
					<span id="span1" class="open1">
						<div id="div1" class="open2"></div>
					</span>
				</div>
				<hr />
				<div class="clearfix">
					<span class="fl">允许使用移动流量下载书籍</span>
					<span id="span2" class="guanBi1">
						<div id="div2" class="guanBi2"></div>
					</span>
				</div>
				<hr />
				<div class="clearfix">
					<span class="fl">推送设置</span>
					<span id="span3" class="open1">
						<div id="div3" class="open2"></div>
					</span>
				</div>
			</div>
			<div class="settingClass">
				<div class="clearfix">
					<span class="fl">社交账号绑定</span>
					<span class="settingMore fr">
						<img src="img/setting_next.png" />
					</span>
				</div>
				<hr />
				<div id="huanCun" class="clearfix">
					<span class="fl">清理缓存</span>
					<span class="settingMore fr">
						<img src="img/setting_next.png" />
					</span>
					<p id="daXiao" class="settingCache">当前缓存大小为10.1M</p>
					<div id="tanChuang" class="settingClearCache">
						<img src="img/setting_clear.png" />
						<p>清理缓存中...</p>
					</div>
				</div>
				<hr />
				<div class="clearfix">
					<span class="fl">去APP Store评分</span>
					<span class="settingMore fr">
						<img src="img/setting_next.png" />
					</span>
				</div>
			</div>
		</div>

		<script>
//			 开关按钮
			span1.onclick = function(){
				span1.className=(span1.className=="guanBi1")?"open1":"guanBi1";
				div1.className=(div1.className=="guanBi2")?"open2":"guanBi2";
			};
			span2.onclick = function(){
				span2.className=(span2.className=="guanBi1")?"open1":"guanBi1";
				div2.className=(div2.className=="guanBi2")?"open2":"guanBi2";
			};
			span3.onclick = function(){
				span3.className=(span3.className=="guanBi1")?"open1":"guanBi1";
				div3.className=(div3.className=="guanBi2")?"open2":"guanBi2";
			};
//			点击缓存弹窗
			huanCun.onclick = function(){
				tanChuang.style.display = "block";
//				var timer = setInterval(function(){
//					tanChuang.style.display = "none";
//					daXiao.innerHTML = "当前缓存大小为0M";
//				},3000);
				setTimeout(function(){
					tanChuang.style.display = "none";
					daXiao.innerHTML = "当前缓存大小为0M";
				},3000);
			};
			
		</script>
	</body>

</html>